<template>
	<view class="balance">
		<view class="balance-top">
			<u-navbar title="油卡申请明细" :background="background" title-color="#fff" back-icon-color="#fff"></u-navbar>
			<view class="balance-conditions">
				<view class="balance-conditions-tab  btn btn-size" @click="dataTimeShow=true">
					<!-- <text ref="balanceData">{{dataTime}}</text> -->
					{{dataTime}}
					<text class="iconfont iconxiangxia balance-xia"></text>
				</view>
				<!-- view class="balance-conditions-tab balance-conditions-tab-border" @click="typeshow=true">
					{{rechargeType}}
					<text class="iconfont iconxiala1"></text>
				</view> -->
			</view>
		</view>

		<view class="balance-con">
			<!-- 总充值 -->
			<!-- <view class="balance-Aufladung">
		    <view>
		      总充值: <text>￥{{zcz}}</text>
		    </view>
		    <view>
		      总消费: <text>￥{{zxf}}</text>
		    </view>
		  </view> -->
			<view class="balance-time-picker">
				<!-- <view class="time-picker-left btn btn-size" @tap.stop="dataTimeShow=true">
		      <text ref="balanceData">{{dataTime}}</text>
		      <text class="iconfont iconxiangxia balance-xia"></text>
		    </view> -->
				<view class="time-picker-right">
					<view class="">申请总额：￥<text>{{income}}</text></view>
					<view class="">加油金总额：<text>{{order}}</text> </view>
				</view>
			</view>
			<view class="tab">
				<!-- @click="toDeatils(item)" -->
				<view class="recharge" style="display: inline-block;" v-for="(item,index) of balanceList" :key="index"
					v-if="balanceList.length!=0">
					<!-- <view class="recharge-left">
						<view class="charge" v-if="item.ORMTB420CA00=='充值'">
							<image src="https://feishazoushi.cn/appImages/images/accountBalance/shour.png" mode=""></image>
						</view>
					</view> -->
					<view class="" style="display: flex; justify-content: space-between;">
						<view class="">
							<text class="recharge-font-data">申请时间： <text style="">{{item.ORMTB478CB01}}</text></text>
						</view>
						<view class="">
							<text class="recharge-font-data" v-if="item.ORMTB478CD01=='0'">状态：<text class=""
									style="">待审核</text></text>
							<text class="recharge-font-data" v-if="item.ORMTB478CD01=='1'">状态：<text class=""
									style="color:#67c23a;">通过</text></text>
							<text class="recharge-font-data" v-if="item.ORMTB478CD01=='2'">状态：<text class=""
									style="color:#f56c6c;">拒绝</text></text>
									<text class="recharge-font-data" v-if="item.ORMTB478CD01=='3'">状态：<text class=""
											style="color:#e59c00;">取消</text></text>
									
									
						</view>
					</view>

					<view class="li-recharge-line">
						<view class="recharge-right">
							<view class="recharge-font">
								<text class="recharge-font-zi">申请人：{{item.ORMTB410CA02}}</text>
							</view>
							<view class="recharge-doll">
								<text class="">
									<!-- <text class="recharge-doll-yuFont" style="font-size: 24rpx;">{{item.ORMTB420CA07}}</text> -->
									<text class="recharge-doll-yuFont" style="margin-bottom: 0; font-size: 24rpx;">申请金额：
										<text class="" style="color: #CCCC00;">{{item.ORMTB478CA01}} 元</text></text>
								</text>
							</view>
							
						</view>
						<view class="" style="padding: 20rpx 0; display: flex; justify-content: space-between;">
							<view class="">
								
							</view>
							<view class="" v-if="item.ORMTB478CD01=='0'">
								<u-button @click="qxyksqFun(item)" type="error" size="mini">取消</u-button>
							</view>
							
						</view>
					</view>
				</view>
				<view class="sendorder-loadmore">
					<u-loadmore v-if="balanceList.length!=0" :status="status" :icon-type="iconType"
						:load-text="loadText" />
				</view>
				<view class="balanceWSJ" v-if="balanceList.length==0">
					<image :src="getStaticFilePath('/QXY/noData.png')" mode="">
				</view>
			</view>
		</view>
		<u-picker v-model="dataTimeShow" mode="time" :params="params" @confirm="dateStartConfirm"></u-picker>
		<u-select v-model="typeshow" :default-value="typeIndex" :list="typeList" @confirm="typeOnConfirm">
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#00a1f1',
				},
				userinfo: JSON.parse(uni.getStorageSync('userinfo')),
				status: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				countpage: 1,
				page: 1,
				balanceList: [],
				index: 0,
				kap: 0,
				CZ: '',
				dataTimeShow: false,
				dataTime: this.dateTransfor(new Date(), "yyyy-MM"),
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				zxf: '', //总消费
				zcz: '', //总充值
				income: 0, //收入
				order: 0, //总订单说
				perple: 0, //总邀请人数
				rechargeType: '全部类型', //充值类型
				typeshow: false,
				typeList: [{
						value: '',
						label: '全部'
					}, {
						value: 'CZ',
						label: '充值'
					}, {
						value: 'TK',
						label: '退款'
					}, {
						value: 'HC',
						label: '红冲'
					}, {
						value: 'KK',
						label: '扣款'
					},
					{
						value: 'SR',
						label: '运费'
					},
					{
						value: 'YDKK',
						label: '运费运单扣款'
					},
					{
						value: 'QX',
						label: '运单补偿'
					}
				],

				infoType: '',
				typeIndex: [0],
				ID: '',

			}
		},
		onShow() {

			this.queryData()

		},
		onLoad(op) {
			console.log(op)
			this.ID = op.ORMTB410CA01
		},
		onReachBottom() {
			if (this.page == this.countpage) {
				return this.status = "nomore"
			}
			this.page++
			this.queryData()
		},
		methods: {
			typeOnConfirm(e) {
				if (e[0].label == '全部类型') {
					this.infoType = ''
				} else {
					this.typeIndex = [(this.typeList || []).findIndex((profile) => profile.value === e[0].value)]
					this.infoType = e[0].value
				}
				this.rechargeType = e[0].label
				this.balanceList = []
				this.page = 1
				this.countpage = 1
				this.queryData();
				this.typehow = false;
			},
			dateStartConfirm(e) {
				this.dataTime = e.year + '-' + e.month
				this.balanceList = []
				this.page = 1
				this.countpage = 1
				this.queryData()
			},
			dateTransfor(date, format) {
				var o = {
					"M+": date.getMonth() + 1,
					"d+": date.getDate(),
					"h+": date.getHours(),
					"m+": date.getMinutes(),
					"s+": date.getSeconds(),
					"q+": Math.floor((date.getMonth() + 3) / 3),
					"S": date.getMilliseconds()
				};
				if (/(y+)/.test(format)) {
					format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for (let k in o) {
					if (new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" +
							o[k]).length)));
					}
				}
				return format;
			},
			toDeatils(item) {
				console.log(item)
				uni.navigateTo({
					url: '../accpaymentDetails/index' + `?TYPE=${item.ORMTB420CA002}&ORMTB420ID=${item.ORMTB420ID}`
				})
			},
			qxyksqFun(item){
				uni.showLoading({
					title: '请求中...',
					mask: true
				});
				uni.request({
					url: this.baseUrl + '/orm/ormtb477/cancleOrmtb478',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB410CA00: this.userinfo.ORMTB410ID, //二级级客户ID
						ORMTB478ID: item.ORMTB478ID
					},
					success: (res) => {
						uni.hideLoading();
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.data,
								duration: 5000,
								icon: 'none',
							});
							this.queryData()
						} 
						
						else {
							uni.showToast({
								title: res.data.message,
								duration: 5000,
								icon: 'none',
							});
						}
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				});
			},
			queryData() {
				uni.showLoading({
					title: '请求中...',
					mask: true
				});
				this.status = "loading"
				console.log(this.userinfo)
				uni.request({
					url: this.baseUrl + '/orm/ormtb477/ormtb478List',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB478CB01: this.dataTime, //时间
						ORMTB410CA00: this.userinfo.ORMTB410ID, //二级级客户ID
						ORMTB410CA01: this.ID,
						pageNum: this.page,
						size: 10
					},
					// this.userinfo.ORMTB410CA02
					success: (res) => {
						uni.hideLoading();
						console.log(res);
						if (res.data.code == 200) {
							if (!res.data.data || res.data.data == null) {
								this.balanceList = []
								this.page = 1
								this.countpage = 1
								return
							}
							var data = res.data.data.list || []
							// this.income = res.data.data.income
							// this.order = res.data.data.order
							// this.perple = res.data.data.perple
							if (this.page > 1) {
								this.balanceList = [...this.balanceList, ...data]
								console.log(this.balanceList)
							} else {
								this.balanceList = data

							}
							this.countpage = Math.ceil(res.data.data.total / 10)
						} else {
							this.balanceList = []
							this.page = 1
							this.countpage = 1
							uni.showToast({
								title: res.data.message,
								duration: 5000,
								icon: 'none',
							});
						}
						if (this.countpage == this.page) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
					},
					fail: (res) => {
						if (this.countpage == this.page) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
						uni.hideLoading();
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				});
			},
		}
	}
</script>

<style scoped>
	.sendorder-loadmore {
		/* background-color: #e3e3e3; */
		padding: 20rpx 0 20rpx 0;
	}

	.balance-conditions {
		display: flex;
		background-color: #FFF;
		color: #333;
		font-size: 30rpx;
		line-height: 44rpx;
		padding: 15rpx 21rpx;
		height: 84rpx;
		overflow: hidden;
		border-bottom: 12rpx solid rgba(242, 242, 242, 1);

	}

	.balance-conditions-tab {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		overflow: hidden;
		position: relative;
		padding-right: 36rpx;
		color: #333;
	}

	.balance-conditions-tab-border {
		border-left: 4rpx solid #f2f2f2;
	}

	.balance-conditions-tab+.balance-conditions-tab {
		margin-left: 22rpx;
	}

	.balance-conditions-tab text {
		position: absolute;
		right: 0;
	}

	.balance-conditions-tab .iconfont {
		font-size: 30rpx;
		color: #99989b;
		margin-left: 7rpx;
	}

	.balance {
		/* background: rgba(242, 242, 242, 0.95); */
	}

	/*如果用户没有订单--内容最外层父元素加上class*/
	.balanceWSJ {
		padding-top: 200rpx;
	}

	.balanceWSJ image {
		display: block;
		margin: 0 auto;
		height: 360rpx;
		width: 43%;
	}

	/* */
	.chargeColorYellow {
		/* 红冲 */
		/* background: url(../../../../../../static/image/hongc.png); */

	}

	.chargeColorRed {
		/* background: url(../../../../../../static/image/xiao.png); */
		/* 消费 */
	}

	.chargeColorBlue {
		/* 充值 */
		/* background: url(../../../../../../static/image/cong.png); */

	}

	.chargeColorPblue {
		/* 退款 */
		/* background: url(../../../../../../static/image/tuikuan.png); */
	}

	/*当月无数据时显示--缺醒页 */
	.balanceQXY {
		display: none !important;
	}



	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	.clearfix {
		zoom: 1;
	}

	/**/

	.balance .link {
		color: rgba(153, 153, 153, 1);
	}

	.balance-top {
		position: fixed;
		width: 100%;
		z-index: 11;
	}



	/**/

	.balance .tab {
		padding: 0 20rpx;
		margin: 0;
		width: 100%;
		/*height: rem;*/
		/* min-height: 13.3rem; */
		background: rgba(255, 255, 255, 1);
	}

	.balance .tab-tap {
		width: 100%;
		height: 72rpx;
		display: flex;
		flex-direction: row;
	}

	.balance .tab-tap .tab-list {
		font-size: 28rpx;
		text-align: center;
		line-height: 86rpx;
		width: 33%;
		height: 86rpx;
		border-bottom: 4rpx solid rgba(255, 255, 255, 1);
	}

	.balance .borCol {
		border-bottom: 4rpx solid rgba(0, 161, 241, 1) !important;
	}

	/**/

	.balance .cont {
		margin-top: 15rpx;
	}

	.balance .recharge {
		width: 100%;
		display: flex;
		flex-direction: row;
		padding: 15rpx 0;
	}

	.balance .recharge-left {
		margin-right: 22rpx;
		text-align: center;
		margin-top: 18rpx;
	}

	.balance .charge {
		width: 54rpx;
		margin-left: 24rpx;
		height: 54rpx;
		line-height: 58rpx;
		background-size: cover;
		border-radius: 50%;
		font-size: 32rpx;
	}

	.balance .charge image {
		width: 100%;
		height: 100%;
	}

	.balance .recharge-right {
		width: 100%;
		/* width: 95%; */
		/* height: 1.11rem; */
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-top: 18rpx;
		padding-right: 20rpx;
		/* padding-right: 0.5rem; */
	}

	.balance .recharge-line {
		height: 2rpx;
		background: rgba(153, 153, 153, 0.3);
		/* width: 93%; */
		width: 96%;
		position: absolute;
		/* bottom: -0.2rem; */
		bottom: 0;
		left: 0;
	}
	.balance .li-recharge-line{
		border-bottom: 2rpx solid #eee;
		/* height: 2rpx; */
		/* background: rgba(153, 153, 153, 0.3); */
		/* width: 96%;
		position: absolute;
		bottom: 0;
		left: 0; */
	}

	.balance .recharge-font {
		width: 50%;
		/* height: 1.25rem; */
	}

	.balance .recharge-font-zi {
		font-size: 28rpx;
		/* font-weight: 400; */
		/* height: 32rpx;
		line-height: 36rpx; */
		color: rgba(51, 51, 51, 1);
		display: block;
	}

	.balance .recharge-font-data {
		font-size: 24rpx;
		/* height: 0.35rem;/ */
		line-height: 64rpx;
		display: block;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 0;
	}

	.balance .recharge-doll {
		font-size: 32rpx;
		line-height: 43rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		display: flex;
		flex-direction: column;
	}

	.recharge-doll text {
		text-align: right;
	}

	.recharge-doll text:first-child {
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	}

	.recharge-doll text:first-child text {
		font-size: 35rpx;
	}

	.recharge-doll text:last-child {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}


	.balance .balance-time-picker {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 29rpx;
		font-size: 24rpx;
		background: rgba(242, 242, 242, 1);
	}

	.time-picker-left {
		line-height: 100rpx;
		color: rgba(51, 51, 51, 1);
	}


	/* 向下--图标 */
	.balance-xia {
		position: relative;
		top: 6rpx;
	}

	.time-picker-left .down {
		margin-top: 7rpx;
	}

	.time-picker-right {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		color: rgba(102, 102, 102, 1);
		text-align: center;
	}

	.balance-con {
		position: absolute;
		top: 0;
		margin-top: 238rpx;
		width: 100%;
	}

	.balance-Aufladung {
		width: 100%;
		background: rgba(255, 255, 255, 1) !important;
		padding: 15rpx 29rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.recharge-doll-yuFont {
		font-size: 26rpx;
		color: rgba(153, 153, 153, 1);
		/* line-height: 65rpx; */
		display: inline-block;
	}

	.recharge-font-dataName {
		margin-bottom: 18rpx;
	}

	.cor-zc {
		color: #33CC99 !important;
	}
</style>
